<template>
  <table border="0" cellpadding="0" cellspacing="0"
         style="border-collapse: collapse; width: 100%; background-color: #fff; margin-top: 60px; margin-bottom: 60px;">
    <tbody>
    <tr>
      <td>
        <table align="center" border="0" cellpadding="0" cellspacing="0"
               style="border-collapse: collapse; width: 600px; border: 1px solid #ccc;">
          <tbody>
          <tr>
            <td>
              <table align="center" border="0" width="100%" cellpadding="0" cellspacing="0"
                     style="border-collapse: collapse;">
                <tbody>
                <tr>
                  <td style="padding-bottom: 20px; padding-left: 40px; width: 60px;padding-top: 30px;">
                    <img style="text-align: center;" width="60" height="60"
                         :src="formData.emailModelIconUrl || siteInfo.faviconUrl" alt="">
                  </td>
                  <td style="padding-left: 10px; font-size:16px; font-weight:600; width: 300px; word-break: break-word; color:rgba(33,33,33,1);">
                    {{formData.emailModelSiteName || siteInfo.name}}
                  </td>
                  <td style="padding-top: 40px; padding-bottom: 40px; padding-right: 40px; ">
                    <div
                        style="margin-bottom: 4px; font-size: 13px; color: #333; line-height: 18px; text-align: right;">
                      Order No. LVO39571
                    </div>
                    <div style="font-size: 12px; color: #999; line-height: 18px; text-align: right;">
                      Placed on Oct 20,2021
                    </div>
                  </td>
                </tr>
                <tr>
                  <td colspan="4">
                    <img width="100%" :src="formData.emailModelBackUrl || 'https://tlkj-shopplus.oss-us-west-1.aliyuncs.com/1635305160676ea1on6.jpeg'" alt="">
                  </td>
                  <td></td>
                  <td></td>
                </tr>
                <tr>
                  <td style="font-size:24px; font-weight:600; color:rgba(33,33,33,1); padding-top: 50px; padding-left: 50px; padding-right: 50px; text-align: center;"
                      colspan="4">
                    {{formData.emailModelTitle}}
                  </td>
                </tr>
                <tr>
                  <td style="font-size:14px; font-weight:400; color:rgba(33,33,33,1); padding-top: 24px; text-align: center; padding-left: 50px; padding-right: 50px; padding-bottom: 40px;" colspan="4">
                    <div v-html="formData.emailContentCode"></div>
                   </td>
                </tr>
                <tr v-if="tagName === 'member_reset_password'">
                  <td style="height:38px;
                      text-align: center;background-color: #fff;" colspan="4"> <span>your captcha is：</span> </td>
                </tr>
                <tr v-if="tagName === 'member_reset_password'">
                  <td style="height:38px;
                      text-align: center;background-color: #fff;" colspan="4"> <span id="code" style="font-weight: 900;font-size: 20px">6666666666</span> </td>
                </tr>
                <tr v-if="tagName !== 'member_reset_password'">
                  <td style="height:38px; text-align: center; border-radius:19px;" colspan="4">
                    <a  :style="{color: formData.emailModelButtonMsgColor, background: formData.emailModelButtonBackColor}" style=" height:38px; text-decoration: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; display: inline-block; text-align:center; font-size:14px;border-radius: 19px; padding-right: 41px; padding-left: 41px; line-height: 38px;">
                      {{formData.emailModelButtonMsg}} </a>
                  </td>
                </tr>
                <tr style="background: #fff; text-align: center;">
                  <td style="
            font-size:14px;
            font-family:PingFangSC-Medium,PingFang SC;
            line-height:20px;" colspan="4">
                    <span style="color:rgba(156,156,156,1); "> or </span>
                    <a style="
            color:#1567BB;
            text-decoration: underline;">Visit Our Store</a>
                  </td>
                </tr>
                <tr>
                  <td style="font-size:14px;
                  font-weight:400;
                  color:rgba(33,33,33,1);
                  text-align: center;
                  padding-bottom: 32px;" colspan="4">
                  </td>
                </tr>

                </tbody>
              </table>
<!--              <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%"
                     style="border-collapse: collapse;" v-if="tagName === 'order_send_goods'">
                <tbody>
                <tr style="background: #f2f2f2">
                  <td style="padding-left: 40px; padding-top: 40px; font-size:16px; font-weight:500; color:#212121; line-height:22px;">
                    Shipping Information
                  </td>
                  <td style="padding-top: 40px; font-size:16px; font-weight:500; color:#212121; line-height:22px;">
                    Tracking Number：
                  </td>
                  <td style="padding-top: 40px; font-size:16px; font-weight:500; color:#212121; line-height:22px;">
                    Carrier：
                  </td>
                </tr>
                <tr style="background: #f2f2f2">
                  <td style="color: #212121;font-size: 14px; line-height: 20px;padding-bottom: 40px">
                    <div style="overflow: hidden; display: -webkit-box;padding-left: 40px;">
                      Free Shipping(3-5days)
                    </div>
                    <div style=" overflow: hidden; display: -webkit-box;padding-left: 40px;">
                      Bob Biller
                    </div>
                    <div style=" overflow: hidden; display: -webkit-box;padding-left: 40px;">
                      My Company
                    </div>
                    <div style=" overflow: hidden; display: -webkit-box;padding-left: 40px;">
                      123 Billing Street
                    </div>
                    <div style=" overflow: hidden; display: -webkit-box;padding-left: 40px;">
                      Billtown KY K2P0B0
                    </div>
                    <div style=" overflow: hidden; display: -webkit-box;padding-left: 40px;">
                      Francisco, CA, 94156 United States
                    </div>
                  </td>
                  <td style="color: #212121;font-size: 14px; line-height: 20px;padding-bottom: 40px">
                    <div style="overflow: hidden; display: -webkit-box;">
                      9999999999999999
                    </div>
                  </td>
                  <td style="color: #212121;font-size: 14px; line-height: 20px;padding-bottom: 40px">
                    <div style="overflow: hidden; display: -webkit-box;">
                      shunfeng
                    </div>
                  </td>
                </tr>
                <tr style="background: #f2f2f2" v-if="tagName === 'marketing_activity'">
                  <td colspan="3"
                      style="color: #212121;font-size: 14px; line-height: 20px;padding-bottom: 40px;text-align: center">
                    <div style="font-size:16px;color:#212121; line-height:22px">I've got a discount code for you</div>
                    <div style="font-size:16px;color:#212121; line-height:22px">$5 Off on Order Over $50</div>
                    <div style="font-size:16px;color:#212121; line-height:22px">Use Code:</div>
                    <div style="font-size:18px;color:#333; font-weight:bold;line-height:22px"> 666666</div>
                  </td>
                </tr>
                <tr>
                  <td colspan="3"
                      style="padding-left: 40px; padding-top: 40px; font-size:16px; font-weight:500; color:#212121; line-height:22px;">
                    Order Summary
                  </td>
                </tr>
                <tr>
                  <td colspan="3" style="padding-left: 40px; padding-right: 40px;">
                    <a target="_blank"
                       href="https://www.noracoly.com/report/email/click?type=abandoned_checkout&amp;uuid=4e52d995-5bef-4534-a1d8-6d131f7c5903&amp;redirect=https%3A%2F%2Fwww.noracoly.com%2Fcheckout%2Ff31b5b62-f0fd-43e1-bf19-2d00f2c0ed60%3Fut_campaign%3Dshoplazza_checkout_reminder%26ut_medium%3Demail%26ut_source%3Dshoplazza_checkout&amp;recipient=&amp;send_time=1634713891&amp;extra=eyJvcmRlcl9pZCI6ImYzMWI1YjYyLWYwZmQtNDNlMS1iZjE5LTJkMDBmMmMwZWQ2MCIsIm51bWJlciI6IkxWTzM5NTcxIiwiZW1haWxfYnV0dG9uIjoiVEFPRS1Qcm9kdWN0X0xpc3QtY2hlY2tvdXRfcGFnZSJ9"
                       style="text-decoration: unset">
                      <table align="center" border="0" cellpadding="0" cellspacing="0"
                             style="border-collapse: collapse; width: 100%; table-layout: fixed;">
                        <tbody>
                        <tr style="border-bottom: 1px solid #E5E5E5;">
                          <td style="padding-top: 24px; padding-bottom: 24px; width: 20%;">
                            <img style="width: 85px;"
                                 src="http://shoplazza.oss-cn-shenzhen.aliyuncs.com/oss/operation/30f58dd5d3c8b1283bd53ec4e4a2e331.png"
                                 alt="">
                          </td>
                          <td style="color: #212121; font-size: 14px; line-height: 20px; width: 40%; padding-right: 10px; padding: 24px 0">
                            <div
                                style=" overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;padding: 2px 0;">
                              Harden vol. 1 MVP Sweatshirt
                            </div>
                            <div style="min-height: 18px; padding: 2px 0">
                              <span>Black: </span>
                              <span style="word-break: break-all;">M</span>
                            </div>
                            <div style="min-height: 18px; padding: 2px 0">
                              <span>SKU: </span>
                              <span style="word-break: break-all;">19120710-Purple-24</span>
                            </div>
                            <div style="padding: 2px 0;">$ 50</div>
                          </td>
                          <td style="color: #212121; font-size: 14px; line-height: 20px; text-align: right; width: 20%; padding-right: 10px;">
                            X 3
                          </td>
                          <td style="text-align: right; color: #212121; font-size: 14px; line-height: 20px; width: 20%;">
                            $ 150.00
                          </td>
                        </tr>
                        <tr style="border-bottom: 1px solid #E5E5E5;">
                          <td style="padding-top: 24px; padding-bottom: 24px; width: 20%;">
                            <img style="width: 85px;"
                                 src="http://shoplazza.oss-cn-shenzhen.aliyuncs.com/oss/operation/30f58dd5d3c8b1283bd53ec4e4a2e331.png"
                                 alt="">
                          </td>
                          <td style="color: #212121; font-size: 14px; line-height: 20px; width: 40%; padding-right: 10px; padding: 24px 0">
                            <div
                                style=" overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;padding: 2px 0;">
                              Harden vol. 1 MVP Sweatshirt
                            </div>
                            <div style="min-height: 18px; padding: 2px 0">
                              <span>Black: </span>
                              <span style="word-break: break-all;">M</span>
                            </div>
                            <div style="min-height: 18px; padding: 2px 0">
                              <span>SKU: </span>
                              <span style="word-break: break-all;">19120710-Purple-24</span>
                            </div>
                            <div style="padding: 2px 0;">$ 50</div>
                          </td>
                          <td style="color: #212121; font-size: 14px; line-height: 20px; text-align: right; width: 20%; padding-right: 10px;">
                            X 3
                          </td>
                          <td style="text-align: right; color: #212121; font-size: 14px; line-height: 20px; width: 20%;">
                            $ 150.00
                          </td>
                        </tr>
                        <tr style="color: #212121; font-size: 14px; line-height: 30px;">
                          <td colspan="2" style="text-align: left;width: 50%;">Subtotal</td>
                          <td colspan="2" style="text-align: right;width: 50%;">$202.00</td>
                        </tr>
                        <tr style="color: #212121; font-size: 14px; line-height: 30px;">
                          <td colspan="2" style="text-align: left;width: 50%;">Coupon Deduction</td>
                          <td colspan="2" style="text-align: right; color: #D9001B;width: 50%;">-$10.00</td>
                        </tr>
                        <tr style="border-bottom: 1px solid #E5E5E5;color: #212121; font-size: 14px; line-height: 30px;">
                          <td colspan="2" style="text-align: left;width: 50%;">Shipping Fee</td>
                          <td colspan="2" style="text-align: right;width: 50%;">$20.00</td>
                        </tr>
                        <tr style="border-bottom: 1px solid #E5E5E5;color: #333; font-weight: bold; font-size: 18px; line-height: 36px;">
                          <td colspan="2" style="text-align: left; width: 50%;padding-bottom: 20px;">Total</td>
                          <td colspan="2" style="text-align: right;width: 50%;padding-bottom: 20px;">$212.00</td>
                        </tr>
                        </tbody>
                      </table>
                    </a>
                  </td>
                </tr>
                </tbody>
              </table>-->
            </td>
          </tr>
          <tr>
            <td>
              <!--                                这里可以切出来-->
              <table align="center" border="0" cellpadding="0" cellspacing="0"
                     style="border-collapse: collapse; width: 100%;">
                <tbody>
                <tr>
                  <td style="background-color: #F7F7F7;padding-top: 32px;padding-bottom: 10px;text-align: center;font-size:16px;font-weight:600;color:#333;line-height:22px;">
                    Need Assistance? Talk to us.
                  </td>
                </tr>
                <tr>
                  <td style="background-color: #F7F7F7;padding-left: 50px;padding-right: 50px;text-align: center;font-size:14px;color:#777;line-height:21px;">
                    We'll do everything we can to make sure you love your experience with us. Have any
                    questions or
                    feedback? Contact us at
                    <a style="color: #1567BB; text-decoration: none;">【service@{{siteInfo.name}}.com】</a>
                  </td>
                </tr>
                <tr>
                  <td style="background-color: #F7F7F7;padding-top: 20px;padding-bottom: 32px;text-align: center;font-size:14px;color:#777;line-height:20px;">
                    This email was sent by 【{{siteInfo.name}}】
                  </td>
                </tr>
                </tbody>
              </table>
            </td>
          </tr>
          </tbody>
        </table>
      </td>
    </tr>
    </tbody>
  </table>
</template>

<script>
import {mapGetters} from 'vuex';

export default {
    name: 'notification-template1',
    props: {
        value: {
            type: Object
        },
        tagName: {
            type: String
        }
    },
    computed: {
        ...mapGetters(['siteList']),
        siteId () {
            return this.$store.state.user.siteId;
        },
        siteInfo () {
            let info = this.siteList.find(res => res.id === Number(this.siteId));
            console.log(info);
            return info;
        },
        formData () {
            return this.value;
        }
    }
};
</script>

<style scoped>

</style>
